<div class="body">
  <div class="body_resize">
    <div class="left" align="left">
      <h1><small>Agregar cliente</small></h1>

      <% form_for (@cliente) do |f| %>
        <%= f.error_messages %>
        <p>
          <%= f.label :nombre %><br />
          <%= f.text_field :nombre, :readonly => true %>
        </p>
        <p>
          <%= f.label :apellido %><br />
          <%= f.text_field :apellido, :readonly => true%>
        </p>
        <p>
          <%= f.label :correo %><br />
          <%= f.text_field :correo, :readonly => true %>
        </p>
        <p>
          <%= f.label(:fecha_nac,"Fecha de Nacimiento") %><br />
          <%= f.date_select :fecha_nac, :discard_day => false, :start_year => 1930, :end_year => 2037 %>
        </p>
        <% f.fields_for :direccions do |d| %>
          <p>
            <%= d.label(:nombre,"Nombre de la Dirección") %><br />
            <%= d.text_field(:nombre, :maxlength => 20) %><br />

          </p>
          <p>
            <%= d.label(:residencia_calle,"Calle") %><br />
            <%= d.text_field(:residencia_calle, :maxlength => 20) %><br />

          </p>
          <p>
            <%= d.label(:apartamento_num_casa,"Apartamento/Casa Numero") %><br />
            <%= d.text_field(:apartamento_num_casa, :maxlength => 4) %>
          </p>
          <p>
            <%= d.label(:urbanizacion,"Urbanización") %><br />
            <%= d.text_field(:urbanizacion, :maxlength => 20) %>
          </p>
          <p>
            <%= d.label(:ciudad,"Ciudad") %><br />
            <%= d.text_field(:ciudad, :maxlength => 20) %>
          </p>
          <p>
            <%= d.label(:pais,"País") %><br />
            <%= d.text_field(:pais, :maxlength => 20) %>
          </p>
          <p>
            <%= d.label(:codigo_postal,"Código Postal") %><br />
            <%= d.text_field(:codigo_postal, :maxlength => 5) %>
          </p>
          <p>
            <%= d.hidden_field :latitud %>
            <%= d.hidden_field :longitud %>
          </p>
        <%end%>

        <% f.fields_for :tarjetas do |t| %>
          <p>
            <%= t.label(:nombre_dueno,"Nombre del Tarjeta Habiente") %><br />
            <%= t.text_field(:nombre_dueno, :maxlength => 25) %><br />

          </p>
          <p>
            <%= t.label(:numero_cuenta,"Numero de tarjeta") %><br />
            <%= t.text_field(:numero_cuenta, :maxlength => 18) %><br />

          </p>
          <p>
            <%= t.label(:fecha_vencimiento,"Fecha de Vencimiento") %><br />
            <%= t.date_select :fecha_vencimiento, :discard_day => true, :start_year => Date.current.year, :end_year => 2037 %>
          </p>
          <p>
            <%= t.label(:codigo_seguridad,"Código de seguridad") %><br />
            <%= t.password_field(:codigo_seguridad, :maxlength => 3) %>
          </p>

          <br></br>
        <%end%>
        <h2>Marque la dirección en el mapa</h2>
        <br></br>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          var centrodelmapa = new google.maps.LatLng(10.496420232955682, -66.906738281258);
          var parliament = new google.maps.LatLng(10.496420232955682, -66.906738281258);
          var marker;
          var map;
 
          function initialize() {
            var mapOptions = {
              zoom: 14,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: centrodelmapa
            };
 
            map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
          
            marker = new google.maps.Marker({
              map:map,
              draggable:true,
              animation: google.maps.Animation.DROP,
              position: parliament
            });
            google.maps.event.addListener(marker, 'click', toggleBounce);
            google.maps.event.addListener(marker, 'dragend', coordinates);
          }
 
          function toggleBounce() {
 
            if (marker.getAnimation() != null) {
              marker.setAnimation(null);
            } else {
              marker.setAnimation(google.maps.Animation.BOUNCE);
            }
          }
          function coordinates() {
            var point = new google.maps.LatLng(marker.getPosition().lat(),marker.getPosition().lng(),true);
            map.panTo(point);
            document.getElementById("cliente_direccions_attributes_0_latitud").value = point.lat();
            document.getElementById("cliente_direccions_attributes_0_longitud").value = point.lng();
          }
        </script>

        <body onload="initialize()"></body>
        <center>
          <div id="map" style="width: 610px; height: 480px"></div>
          <div id="message"></div>
          <br></br>
        </center>
        <%= f.submit 'Registrar' %>
        <%= link_to 'Cancelar', :controller => 'principals', :action => 'home' %>   
      <% end %>

    </div>
    <div class="right">
      <img src="/images/carretillaCajita.jpg" alt="" width="270" height="270" />
    </div>
    <div class="clr"></div>
  </div>
</div>